<template>
  <view class="official">
    <!-- 昵称头像 -->
    <view class="info">
      <view class="info-left">
        <image src="../../static/message/green_message.png" mode=""></image>
      </view>
      <view class="info-right">
        <view class="info-name">
          <view class="info-name-tit" v-show="!show">
            全网通告
          </view>
          <view class="info-name-tit" v-show="show">
            平台号
          </view>
          <view class="info-name-image">
            <image src="../../static/message/sex_woman.png" mode=""></image>
          </view>
        </view>
        <view class="info-num" v-show="show">
          昵称：全网通告
        </view>
        <view class="info-num">
          平台号：A000001
        </view>
        <view class="info-area">
          地区：河南&nbsp;&nbsp;郑州
        </view>
      </view>
    </view>
    <!-- 昵称头像 -->
    <!-- 间隔槽 -->
    <u-gap height="5" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 模块2 -->
    <view class="chat-box">
      <!-- 备注 -->
      <view class="chat-records">
        <view class="char-left">
          备注
        </view>
        <view class="chat-right">
          <view class="chat-right-tit" v-show="show">平台号</view>
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
      <!-- 标签 -->
      <view class="chat-records" @click="toLabel()">
        <view class="char-left">
          标签
        </view>
        <view class="chat-right">
          <view class="chat-right-tit">邻居</view>
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
      <!-- 更多信息 -->
      <view class="chat-records" @click="toMoreInfo()">
        <view class="char-left">
          更多信息
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
      <!-- 供需历程 -->
      <view class="chat-records" @click="toNeedHistory()">
        <view class="char-left">
          供需历程
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 模块2 -->
    <!-- 间隔槽 -->
    <u-gap height="5" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 功能按钮 -->
    <view class="function-but">
      <view class="fun-left">
        <view class="left-image">
          <image src="../../static/message/blue-message.png"></image>
        </view>
        <view class="left-tit">
          发消息
        </view>
      </view>
      <view class="fun-left">
        <view class="left-image">
          <image src="../../static/message/blue-video.png" class="but-right-image"></image>
        </view>
        <view class="left-tit">
          音视频通话
        </view>
      </view>
    </view>
    <!-- 功能按钮 -->
    <!-- 间隔槽 -->
    <u-gap height="5" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 加好友 -->
    <view class="add-friend" @click="add();open()" v-show="!show">
      +好友
    </view>
    <view class="hover-opacity" @click="add();open()" v-show="show">
      已添加
    </view>
    <!-- 加好友 -->
    <!-- tab栏切换 -->
    <view class="tab">
      <view class="tab-top" v-for="(item,i) in tabList" :key="i" @click="tabShow=i">
        <view class="tab-item">
          <image :src="item.img" class="tab-image"></image>
          <view class="tab-tit">{{item.tit}}</view>
        </view>
        <view :class="tabShow==i?'tab-line':'active-line'"></view>
      </view>
    </view>
    <view class="tab-con" v-show="tabShow==0">
      <view class="all">
        <!-- 1 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="allitemtext">
            <span>又大又新鲜的水果送啦
              <br />
              这里最多两行
            </span>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                0.56km
              </view>
            </view>
            <view class="address">
              武汉市·飞飞排档
            </view>
          </view>
          <view class="price">
            ￥2元/斤
          </view>
        </view>
        <!-- 2 -->
        <view class="allitem">
          <view style="position: relative;">
            <image src="../../static/resort/indeximg2.png" mode="" style="width: 100%;height: 310rpx;"></image>
            <image src="../../static/resort/need/stop.png"
              style="width:48rpx;height: 48rpx;position: absolute;top: 12rpx;left: 16rpx;" mode="" @click="tovideo()">
            </image>
          </view>
          <view class="voicebox">
            <view class="voicetext">
              这个地方显示的···60''
            </view>
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                645km
              </view>
            </view>
            <view class="address">
              郑州市·动物园
            </view>
          </view>
          <view class="price">
            ￥5000元/吨
          </view>
        </view>
        <!-- 3 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="voicebox2">
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
            <view class="voicetext">
              23''
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                1485km
              </view>
            </view>
            <view class="address">
              上海市·东方明珠
            </view>
          </view>
          <view class="price">
            ￥8000元/月
          </view>
        </view>
        <!-- 4 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="allitemtext">
            <span>又大又新鲜的水果送啦
              <br />
              这里最多两行
            </span>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                0.56km
              </view>
            </view>
            <view class="address">
              武汉市·飞飞排档
            </view>
          </view>
          <view class="price">
            ￥2元/斤
          </view>
        </view>
        <!-- 5 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="voicebox2">
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
            <view class="voicetext">
              23''
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                1485km
              </view>
            </view>
            <view class="address">
              上海市·东方明珠
            </view>
          </view>
          <view class="price">
            ￥8000元/月
          </view>
        </view>
      </view>
    </view>
    <view class="tab-con" v-show="tabShow==1">
      求助订单
    </view>
    <view class="tab-con" v-show="tabShow==2">
      赚钱订单
    </view>
    <!-- tab栏切换 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        tabShow: 0,
        tabList: [{
          img: '/static/message/order-help.png',
          tit: '帮忙订单'
        }, {
          img: '/static/message/order-my-help.png',
          tit: '求助订单'
        }, {
          img: '/static/message/order-money.png',
          tit: '赚钱订单'
        }]
      };
    },
    methods: {
      add() {
        this.friend = '已添加',
          this.show = !this.show
      },
      open() {
        uni.showToast({
          title: '已发送好友申请',
          icon: 'none',
          duration: 2000
        })
      },
      toLabel() {
        uni.navigateTo({
          url: "/pages/message/label"
        })
      },
      toMoreInfo() {
        uni.navigateTo({
          url: '/pages/message/moreInformation'
        })
      },
      toNeedHistory() {
        uni.navigateTo({
          url: '/pages/message/history'
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .official {

    // 昵称头像
    .info {
      width: 90vw;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      padding: 20rpx 0;

      .info-left {
        margin-right: 40rpx;

        image {
          width: 120rpx;
          height: 120rpx;
        }
      }

      .info-right {

        .info-name {
          display: flex;

          .info-name-tit {
            color: #2BA8FB;
            font-size: 36rpx;
            margin-right: 10rpx;
          }

          .info-name-image {
            image {
              width: 30rpx;
              height: 30rpx;
              vertical-align: middle;
            }
          }
        }

        .info-num {
          color: #939393;
        }

        .info-area {
          color: #939393;
        }
      }
    }

    // 模块2
    .chat-box {
      background-color: #fff;

      .chat-records {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 5vw;
        border-bottom: 1px solid #F5F5F5;

        .char-left {
          font-size: 32rpx;
        }

        .chat-right {
          display: flex;
          align-items: center;

          .chat-right-tit {
            color: #939393;
            font-size: 32rpx;
          }

          image {
            width: 18rpx;
            height: 32rpx;
            vertical-align: middle;
            margin-left: 20rpx;
          }
        }
      }

      .chat-records:last-child {
        border-bottom: none;
      }
    }

    // 功能按钮
    .function-but {
      display: flex;
      width: 90vw;
      margin: 0 auto;

      .fun-left {
        width: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30rpx 5vw;
        border-right: 1px solid #F5F5F5;

        .left-tit {
          color: #2BA8FB;
        }

        .left-image {
          margin-right: 20rpx;

          image {
            width: 30rpx;
            height: 30rpx;
            vertical-align: middle;
          }

          .but-right-image {
            width: 40rpx;
          }
        }
      }

      .fun-left:last-child {
        border-right: none;
      }
    }

    // 加好友
    .add-friend {
      width: 80vw;
      margin: 20rpx auto;
      background-color: #FF2A31;
      color: #fff;
      padding: 20rpx 0;
      font-size: 32rpx;
      text-align: center;
      border-radius: 15rpx;
    }

    .hover-opacity {
      opacity: 0.5;
      width: 80vw;
      margin: 20rpx auto;
      background-color: #FF2A31;
      color: #fff;
      padding: 20rpx 0;
      font-size: 32rpx;
      text-align: center;
      border-radius: 15rpx;
    }

    // tab栏切换
    .tab {
      width: 90vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .tab-top {
        width: 28vw;

        .tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 5rpx;

          .tab-image {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
          }

          .tab-tit {
            color: #333333;
          }
        }

        .tab-line {
          width: 28vw;
          height: 4rpx;
          background-color: #FF2A31;
        }

        .active-line {
          width: 28vw;
          height: 4rpx;
          background-color: #CDCDCD;
        }
      }
    }

    // 帮忙订单
    .tab-con {
      width: 90vw;
      margin: 0 auto;
      padding-top: 20rpx;

      .all {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .allitem {
          margin-bottom: 20rpx;
          width: 49%;
          padding-bottom: 20rpx;
          border-radius: 20rpx;
          background-color: white;

          .allitemtext {
            font-weight: bold;
            padding: 0 10rpx;
            box-sizing: border-box;
            font-size: 30rpx;
          }

          .voicebox {
            margin-top: 8rpx;
            margin-bottom: 10rpx;
            width: 85%;
            height: 70rpx;
            background-color: #FF6A6F;
            border-radius: 5rpx;
            margin-left: 12%;
            padding: 0 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            color: white;
            line-height: 70rpx;

            .voicetext {
              font-size: 26rpx;
            }
          }

          .voicebox2 {
            margin-top: 8rpx;
            margin-bottom: 10rpx;
            width: 55%;
            height: 70rpx;
            background-color: #FF6A6F;
            border-radius: 5rpx;
            margin-left: 2%;
            padding: 0 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: left;
            color: white;
            line-height: 70rpx;

            .voicetext {
              margin-left: 10rpx;
              font-size: 26rpx;
            }
          }

          .allitemthreebox {

            display: flex;
            justify-content: space-between;
            padding: 10rpx 10rpx;
            box-sizing: border-box;

            .kmbox {
              display: flex;

              .kmboxtext {
                padding-left: 5rpx;
                font-size: 26rpx;
                color: #07C160;
              }
            }

            .address {
              font-size: 26rpx;
            }
          }

          .price {
            font-weight: bold;
            color: #FF2A31;
            font-size: 30rpx;
          }
        }

        // }
      }

      // 全部区
    }
  }
</style>